
<template>
  <!-- 大屏背景 -->
 <div class="bg-[url('assets/bg.png')] bg-cover bg-center h-screen text-white flex p-5" v-if="allData">
 
  <!-- left -->
  <div class="flex flex-col flex-1 p-3 mr-5 bg-opacity-50 bg-slate-800">
       <!-- 横向柱状图 -->
       <HorizontalBar class="box-border pb-4 h-1/3" :data="allData.regionData" />  
        <!-- 雷达图 -->
        <RedarBar class="box-border pb-4 h-1/3" :data="allData.riskData"/>
         <!-- 关系图 -->
        <Relation class="box-border h-1/3" :data="allData.relationData"/>
  </div>

  <!-- center -->
  <div class="flex flex-col w-1/2 mr-5">
     <!-- 数据总览图 -->
     <TotalData class="p-3bg-opacity-50 bg-slate-800" :data="allData.totalData"/>  
      <MapChart class="flex-1 p-3 mt-4 bg-opacity-50 bg-slate-800"  :data="allData.mapData" /> 
  </div>

  <!-- right -->
  <div class="flex flex-col flex-1 p-3 mr-5 bg-opacity-50 bg-slate-800">
      <!-- 竖向柱状图 -->
      <VerticalBar class="box-border pb-4 h-1/3" :data="allData.verData" />  
        <!-- 环形图 -->
        <RingBar class="box-border pb-4 h-1/3" :data="allData.abnormalData"/>
         <!-- 文档云图 -->
        <WordCloud class="box-border h-1/3" :data="allData.wordCloudData" />
  </div>
</div>
</template>


<script setup>
import { ref} from 'vue'

//加载组件
import HorizontalBar from './components/HorizontalBar.vue'
import MapChart from './components/MapChart.vue'
import RedarBar from './components/RedarBar.vue'
import Relation from './components/Relation.vue'
import RingBar from './components/RingBar.vue'
import TotalData from './components/TotalData.vue'
import VerticalBar from './components/VerticalBar.vue'
import WordCloud from './components/WordCloud.vue'

//图形  数据 
import mockData from './mock'

const allData = ref(null)
  const loadData = async ()=>{
    allData.value = mockData
    console.log(allData.value)
  }
  
  loadData()

  setInterval(() => {
  loadData()
}, 3000)

</script>

<style scoped>

</style>
